<template>
  <div
    @click="handleClick"
    :class="[
      'asr-result-cell',
      is_active ? 'active-bg' : '',
      isSearchThisLine ? 'search-bg' : '',
    ]"
  >
    <div class="name-time">
      <div
        :class="[
          'speak-name',
          is_active ? 'active-text-color' : '',
          isSearchThisLine ? 'search-text-color' : '',
        ]"
        v-html="highlightName"
      ></div>
      <div
        :class="[
          'time',
          is_active ? 'active-text-color' : '',
          isSearchThisLine ? 'search-text-color' : '',
        ]"
        v-html="highlightTime"
      ></div>
    </div>
    <div class="line" />
    <div :class="['content', 'van-haptics-feedback']">
      <div
        :class="isSearchThisLine ? 'search-text-color' : ''"
        v-html="is_active ? activeContent : highlightContent"
      ></div>
    </div>

    <div
      v-show="enableAsrOptimize"
      :class="[
        'ai-text',
        is_active ? 'active-text-color' : '',
        isSearchThisLine ? 'search-text-color' : '',
      ]"
      v-html="highlightTextPolish"
    ></div>
    <div
      v-show="enableAsrOptimize"
      :class="['ai-tip', is_active ? 'active-text-color' : '']"
    >
      <img src="@/icons/svg/minute/ai_result.svg" />
      AI改写结果
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps, PropType } from "vue";
import { useMinutesStore } from "@/store/modules/minutes/minutes";
import { AsrParagraphs, AsrObject, SearchIndexModel } from "@/types/minutes/store.type";

const {
  item,
  keyword,
  active_item_array,
  is_active,
  enableAsrOptimize,
  useRealTime,
  index,
} = defineProps({
  item: {
    type: Object as PropType<AsrObject | AsrParagraphs>,
    required: true,
  },
  index: {
    type: Number,
    default: 0,
  },
  keyword: {
    type: String,
    default: "",
  },
  active_item_array: {
    type: Array,
    default: () => [],
  },
  is_active: {
    type: Boolean,
    default: false,
  },
  enableAsrOptimize: {
    type: Boolean,
    default: false,
  },
  useRealTime: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["clickEditInfoBtn"]);

const minutesStore = useMinutesStore();

const handleClick = () => {
  console.log("item", item);
  minutesStore.setPlayerTimeStamp(item.bt);
};

const searchIndexModel = computed(() => minutesStore.searchInfo);

const isSearchThisLine = computed(() => {
  if (!searchIndexModel.value) {
    return false;
  }
  return (
    searchIndexModel.value.item.bt == item.bt && searchIndexModel.value.item.et == item.et
  );
});

// // 方法
const replaceHeightStyle = (value: string) => {
  if (!keyword) {
    return value;
  }
  if (!value) {
    return "";
  }
  const keywordRegex = new RegExp(`(${keyword})`, "gi");

  return value.replace(keywordRegex, (key1, key2, offset) => {
    if (isSearchThisLine.value && offset === searchIndexModel.value.indexOfLine) {
      let textColor = isSearchThisLine.value ? "highlight-on-search-color" : "";
      return `<span class="highlight-on-search ${textColor}">${key1}</span>`;
    }
    return `<span class="highlight">${key1}</span>`;
  });
};

const text = computed(() => {
  if ("AsrList" in item) {
    return item.AsrList.map((v) => v.txt).join();
  }
  return item.txt;
});

const textPolish = computed(() => ("TextPolish" in item ? item.TextPolish : ""));

// // 计算属性 - 高亮相关
const highlightContent = computed(() => replaceHeightStyle(text.value));
const highlightName = computed(() => replaceHeightStyle(item.name));
const highlightTime = computed(() =>
  replaceHeightStyle(useRealTime ? item.startTime : item.startTimeByFile)
);
const highlightTextPolish = computed(() => replaceHeightStyle(textPolish.value));
const activeContent = computed(() => `<span class="active-content">${text.value}</span>`);

// const
</script>

<style scoped lang="less">
.asr-result-cell {
  display: flex;
  flex-direction: column;
  align-items: start;
  background-color: #f9fafc;
  padding: 12px 15px;
  border-radius: 8px;
  margin-top: 12px;

  .line {
    height: 1px;
    width: 100%;
    margin: 12px 0;
    background-color: #f0f0f0;
  }
}

.speak {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.head-img {
  width: 38px;
  height: 38px;
  margin-right: 10px;
}

.name-time {
  height: 100% !important;
  flex-direction: row;
  display: flex;
  align-items: center;
  font-size: 10px;
}

.speak-name {
  margin-right: 12px;
  font-weight: 400;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 18px;
}

.time {
  color: #8c8c8c;
  font-size: 10px;
}

.content {
  margin-top: 4px;
  text-align: left;
  color: #8c8c8c;
  font-size: 12px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.head-img-box {
  position: relative;
}

.ai-text {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  color: #262626;
  line-height: 22px;
  margin-top: 10px;
}

.ai-tip {
  color: #436bff;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-top: 10px;

  img {
    margin-right: 4px;
  }
}

.edit-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6px;
  height: 6px;
  border-radius: 9px;
  background-color: #757575;
  padding: 4px;
  position: absolute;
  right: 10px;
  bottom: 6px;
}

/deep/ .highlight {
  background-color: #ffdea4ca;
  border-radius: 2px;
  padding: 0px 1px 0px 1px;
  margin: 0px 1px;
}

/deep/ .highlight-on-search {
  background-color: #ffdea4;
  border-radius: 2px;
  padding: 0px 1px 0px 1px;
  margin: 0px 1px;
  opacity: 1;
}

/deep/ .highlight-on-search-color {
  color: #262626;
}

/deep/ .active-content {
  color: #ffffff;
  font-weight: 500;
}

.custom-popover-container {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 140px;
}

.custom-popover-title {
  font-size: 12px;
  opacity: 0.6;
  height: 28px;
  padding-left: 12px;
  display: flex;
  align-items: center;
}

.custom-popover-cell {
  height: 28px;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding-left: 12px;
}

.custom-popover-cell:active {
  background-color: #999;
}

.active-bg {
  background-color: #436bff;
}

.search-bg {
  background-color: #436bff;
}

.search-text-color {
  color: white;
}

.active-text-color {
  color: #fff;
}
</style>
